<template>
    <a-render>
        <template #search>
          <SearchForm 
            :span="6" 
            :fields="req" 
            :list="searchFormJSON" 
            :toggle-span="[6, 6]"
            :show-toggle="false"
            @search="callbackSearch"
            @reset="callbackReset"
          ></SearchForm>
        </template>
        <Table ref="tabelRef" :data="dataList" :column="column" :operation="false" @page="changePage">
          <template #status="data">
            <Tag is-text :type="borrowlStatusOptions.useDictItem(data.row.status)?.type">
              {{ borrowlStatusOptions.useDictItem(data.row.status)?.label }}
            </Tag>
          </template>
        </Table>
    </a-render>
    <ModalForm v-model:open="state.openBookForm" v-if="state.openBookForm" :row="state.row" @ok="getList"  />
</template>
<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { useRouter } from "vue-router"
// 组件
import SearchForm from "@/components/searchForm/search.vue"
import Table from "@/components/table/index.vue"
import Tag from "@/components/tag/index.vue"
import Switch from "@/components/control/switch/index.vue"
// modal
import ModalForm from "../component/form/index.vue"
// 搜索和表格配置
import { column } from "./column"
import { useSearchForm } from "./search"
import { useDict } from "@/dict/index"
// hook
import { useTable } from "@/hook/index"
import { useBorrowlist } from "./use-borrowlist"
import dayjs, { Dayjs } from 'dayjs';
// router
const router = useRouter()
// 书籍状态
const bookStatus = useDict('bookStatusOptions')
// 借阅状态
const borrowlStatusOptions = useDict('borrowlStatusOptions')
const tabelRef = ref(null)
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
const { useGetBookList, dataList } = useBorrowlist()
// 搜索配置项
const { searchFormJSON } = useSearchForm()
// 请求参数
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
  status: undefined,
  book_name: "",
  book_isbn: "",
  user_name: "",
  create_date: [],
  due_date: [],
  return_date: [],
})

const handelOk = () => {
  console.log('异步请求成功，回调')
}

const state = reactive({
  row: {},
  openBookForm: false,
})

const openModal = (key, row = {}) => {
  state.row = row
  state[key] = true
}

const toDetailed = (row) => {
  router.push({
    path: `/bookdetailed/${row.book_id}`,
  })
}

const operationButton = (value, type) => bookStatus.useDictItem(value)?.[type]

/**
 * 列表数据模拟 
 */
const getList = () => {
  useGetBookList(req).then(params => { // function，接收参数
    uesSetTotal(params?.content?.total)
  })
}
/**
 * 分页
 */
const changePage = (page, size) => {
  req.pageIndex = page
  req.pageSize = size
  getList()
}

/**
 * 搜索
 */
const callbackSearch = () => {
  useSearch()
  getList()
}
/**
 * 设置
 */
const callbackReset = () => {
  useReset()
  getList()
}

onActivated(() => {
  getList()
})
</script>